<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="theme-color" content="hsl(256, 44%, 15%)" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="hsl(273, 37%, 93%)" media="(prefers-color-scheme: light)" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
<link rel="sitemap" href="/sitemap-index.xml" />

<script is:inline>
const root = document.documentElement
const storageKey = 'panda:studio:theme'

const theme = (() => {
    if (typeof localStorage !== 'undefined' && localStorage.getItem(storageKey)) {
        return localStorage.getItem(storageKey)
    }
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        return 'dark'
    }
    return 'light'
})()

const isDark = theme === 'dark'
root.classList[isDark ? 'add' : 'remove']('dark')
root.classList[isDark ? 'remove' : 'add']('light')

if (typeof localStorage !== 'undefined') {
    // Watch the document element and persist user preference when it changes.
    const observer = new MutationObserver(() => {
        const isDark = root.classList.contains('dark')
        localStorage.setItem(storageKey, isDark ? 'dark' : 'light')
    })
    observer.observe(root, { attributes: true, attributeFilter: ['class'] })
}
</script>
